<template>
	<div class="container">
	        <!-- Header -->
	        <div class="header">
	            <div class="avatar">
	                <img src="https://via.placeholder.com/90" alt="头像">
	            </div>
	            <div class="username">用户名</div>
	            <div class="details">会员等级：普通会员</div>
	        </div>
	
	        <!-- Stats -->
	        <div class="stats">
	            <div>
	                <div class="value">680</div>
	                <div class="label">环保积分</div>
	            </div>
	            <div>
	                <div class="value">24 <span>公斤</span></div>
	                <div class="label">回收总量</div>
	            </div>
	            <div>
	                <div class="value">5</div>
	                <div class="label">订单数量</div>
	            </div>
	        </div>
	
	        <!-- Menu -->
	        <div class="menu">
	            <div class="menu-item">
	                <span>我的订单</span>
	                <span class="icon">›</span>
	            </div>
	            <div class="menu-item">
	                <span>消息通知</span>
	                <span class="icon">›</span>
	            </div>
	            <div class="menu-item">
	                <span>亲属账号</span>
	                <span class="icon">›</span>
	            </div>
	            <div class="menu-item">
	                <span>帮助中心</span>
	                <span class="icon">›</span>
	            </div>
	            <div class="menu-item">
	                <span>设置</span>
	                <span class="icon">›</span>
	            </div>
	        </div>
	
	        <!-- Buttons -->
	        <div class="button-container">
	            <a href="#" class="button primary">立即兑换</a>
	            <a href="#" class="button secondary">更多功能</a>
	        </div>
	
	        <!-- Footer -->
	        <div class="footer">
	            感谢您为环保贡献的力量！
	        </div>
	    </div>
</template>

<script>
	export default {
		data() {
			return {
				
			}
		},
		methods: {
			
		}
	}
</script>

<style scoped lang="scss">
.container {
            max-width: 480px;
            margin: 0 auto;
            padding: 20px;
        }

        .header {
            background: linear-gradient(135deg, #ff7eb3, #ff758c, #42a5f5, #6a11cb); /* 多彩渐变色 */
            background-size: 300% 300%; /* 增加动态渐变效果时的平滑过渡 */
            animation: gradient-animation 6s ease infinite; /* 动态渐变动画 */
            color: white;
            text-align: center;
            padding: 30px 20px;
            border-radius: 15px;
            position: relative;
            box-shadow: 0 8px 16px rgba(0, 0, 0, 0.1);
        }

        @keyframes gradient-animation {
            0% { background-position: 0% 50%; }
            50% { background-position: 100% 50%; }
            100% { background-position: 0% 50%; }
        }

        .header .avatar {
            width: 90px;
            height: 90px;
            border-radius: 50%;
            overflow: hidden;
            border: 4px solid white;
            margin: 0 auto 15px;
            box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
        }

        .header .avatar img {
            width: 100%;
            height: 100%;
        }

        .header .username {
            font-size: 22px;
            font-weight: bold;
        }

        .header .details {
            font-size: 14px;
            margin-top: 8px;
            color: rgba(255, 255, 255, 0.8);
        }

        .stats {
            display: flex;
            justify-content: space-between;
            margin: 20px 0;
            background-color: #fff;
            padding: 15px 20px;
            border-radius: 12px;
            box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
        }

        .stats div {
            text-align: center;
            flex: 1;
        }

        .stats > div:not(:last-child) {
            border-right: 1px solid #f0f0f0;
        }

        .stats div .value {
            font-size: 20px;
            font-weight: bold;
            color: #4caf50;
			span{
				font-size: 16px;
			}
        }

        .stats div .label {
            font-size: 14px;
            color: #555;
            margin-top: 5px;
        }

        .menu {
            background-color: #fff;
            border-radius: 12px;
            overflow: hidden;
            box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
        }

        .menu-item {
            display: flex;
            justify-content: space-between;
            align-items: center;
            padding: 15px 20px;
            border-bottom: 1px solid #f0f0f0;
            transition: all 0.3s ease;
            cursor: pointer;
        }

        .menu-item:hover {
            background-color: #f9fafc;
            transform: translateY(-2px);
        }

        .menu-item:last-child {
            border-bottom: none;
        }

        .menu-item span {
            font-size: 16px;
            color: #333;
        }

        .menu-item .icon {
            font-size: 18px;
            color: #bbb;
        }

        .button-container {
            display: flex;
            gap: 10px;
            margin: 20px 0;
        }

        .button {
            flex: 1;
            padding: 15px;
            text-align: center;
            border-radius: 10px;
            color: white;
            font-size: 16px;
            font-weight: bold;
            text-decoration: none;
            transition: all 0.3s ease;
            box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
        }

        .button.primary {
            background: linear-gradient(135deg, #4caf50, #81c784);
        }

        .button.primary:hover {
            background: linear-gradient(135deg, #43a047, #66bb6a);
        }

        .button.secondary {
            background: linear-gradient(135deg, #2196f3, #64b5f6);
        }

        .button.secondary:hover {
            background: linear-gradient(135deg, #1976d2, #42a5f5);
        }

        .footer {
            text-align: center;
            font-size: 14px;
            color: #888;
            margin-top: 20px;
        }
</style>
